<template>
  <div class="app-container">
    <el-tabs type="border-card"  @tab-click="get" v-model="activeName">
      <el-tab-pane name="">
        <span slot="label" class="list-type"><i class="list-total" v-html="cnts.all"></i>全部</span>
        <s-table :sup-this="supThis" :data="data" />
      </el-tab-pane>
      <el-tab-pane name="1">
        <span slot="label" class="list-type"><i class="list-total" v-html="cnts.initial"></i>未开始</span>
        <s-table :sup-this="supThis" :data="data" />
      </el-tab-pane>
      <el-tab-pane name="2">
        <span slot="label" class="list-type"><i class="list-total" v-html="cnts.starting"></i>进行中</span>
        <s-table :sup-this="supThis" :data="data" />
      </el-tab-pane>
      <el-tab-pane name="3">
        <span slot="label" class="list-type"><i class="list-total" v-html="cnts.break"></i>中断</span>
        <s-table :sup-this="supThis" :data="data" />
      </el-tab-pane>
      <el-tab-pane name="4">
        <span slot="label" class="list-type"><i class="list-total" v-html="cnts.finish"></i>结束</span>
        <s-table :sup-this="supThis" :data="data" />
      </el-tab-pane>
      <el-tab-pane name="5">
        <span slot="label" class="list-type"><i class="list-total" v-html="cnts.outcontact"></i>失联</span>
        <s-table :sup-this="supThis" :data="data" />
      </el-tab-pane>
    </el-tabs>
    <el-pagination
      :current-page.sync="page"
      :page-size="limit"
      :total="total"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange" />
  </div>
</template>
<script>
import initData from '@/mixins/initData'
import eHeader from './module/header'
import edit from './module/edit'
import sTable from './module/sTable'

export default {
  components: {
    sTable, eHeader, edit
  },
  mixins: [initData],
  data () {
    return {
      supThis: this,
      total: 0,
      cnts: {
        all: 0,
        initial: 0,
        starting: 0,
        break: 0,
        finish: 0,
        outcontact: 0
      },
      isDisable: false,
      order_time: '',
      principal: '',
      team: '',
      from: '',
      phone: '',
      number: '',
      punch_rate: '',
      principals: [],
      evaluations: [],
      teams: [],
      froms: [],
      service_type: [],
      skus: [],
      skusdetail: [],
      skusprices: [],
      skustype: '',
      skusname: '',
      skusprice: '',
      nick_name: '',
      delivery_name: '',
      gene_no: '',
      goods_title: '',
      listLoading: true,
      orderlist: [],
      loadfull: false,
      goods_info: '',
      content: '',
      mkts: [],
      permission: [],
      permission_ids: [],
      activeName: '',
      status: '',
      status_name: '',
      searchVisible: false,
      s_order_time: '',
      s_from: '',
      s_phone: '',
      s_number: '',
      s_punch_rate: '',
      s_nick_name: '',
      s_delivery_name: '',
      s_gene_no: '',
      s_goods_title: '',
      s_goods_info: '',
      s_goods_info_name: '',
      s_team_name: '',
      s_principal_name: '',
      s_team: '',
      s_principal: '',
      s_page: 1,
      loadBtn: false
    }
  },
  created () {
    // 判断是否是从需要获取缓存的页面(订单详情/调查问卷)上返回
    var issession = window.localStorage.getItem('isStatistic')
    if (issession === true || issession === 'true') {
      // 获取缓存的的参数和默认显示的部分（全部、未开始、进行中等）
      var param = window.localStorage.getItem('params_s')
      if (param !== null && param !== '') {
        var principals = window.localStorage.getItem('principals_s')
        var paramst = param.replace(/ /g, '+')
        var paramstring = crypt.decrypt(paramst)
        var paramJson = JSON.parse(paramstring)
        var principalst = principals.replace(/ /g, '+')
        var pstring = crypt.decrypt(principalst)
        var pJson = JSON.parse(pstring)
        this.skustype = paramJson.sku_type
        this.skusprice = paramJson.price
        this.skusname = paramJson.content
        this.goods_info = paramJson.goods_info
        this.order_time = paramJson.created_at
        this.team = paramJson.parent_id
        this.principals = pJson
        this.principal = paramJson.principal
        this.from = paramJson.from
        this.phone = paramJson.phone
        this.number = paramJson.number
        this.punch_rate = paramJson.punch_rate
        this.page = paramJson.page
        this.pageall = paramJson.page
        this.nick_name = paramJson.nick_name
        this.delivery_name = paramJson.delivery_name
        this.gene_no = paramJson.gene_no
        this.goods_title = paramJson.goods_title
        this.status = paramJson.status
        this.activeName = paramJson.status
      }
    }
    this.getlist()
    this.getcount()
    // 权限部分
    var mid = this.$route.params.id
    var navp = window.localStorage.getItem('nav')
    var navps = navp.replace(/ /g, '+')
    var denav = crypt.decrypt(navps)
    var nav = JSON.parse(denav)
    nav.forEach((item) => {
      if (item.child !== '') {
        item.child.forEach((child) => {
          if (child.id.toString() === mid.toString()) {
            this.permission = child.permission
          }
        })
      }
    })
    this.permission.forEach((item) => {
      this.permission_ids.push(item.unique_key)
    })
    // 点击enter键搜索
    var that = this
    keydown(_ => {
      that.search()
    })
  },
  methods: {
    get (tab) {
      this.status = tab.name
      this.page = 1
      this.pageall = 1
      this.getlist()
    },
    getcount () { // 获取数量
      var param = {
        parent_id: this.team,
        principal: this.principal,
        from: this.from,
        phone: this.phone,
        number: this.number,
        punch_rate: this.punch_rate,
        page: this.page,
        nick_name: this.nick_name,
        delivery_name: this.delivery_name,
        goods_title: this.goods_title,
        goods_info: this.goods_info,
        sku_type: this.skustype,
        price: this.skusprice,
        content: this.skusname,
        gene_no: this.gene_no
      }
      // api.GET(config.urls.litscount, param, successData => {
      //   this.total.all = successData.all
      //   this.total.initial = successData.initial
      //   this.total.starting = successData.starting
      //   this.total.break = successData.break
      //   this.total.over = successData.over
      //   this.total.outcontact = successData.outcontact
      // }, fail => {})
    },
    getlist () {
      this.listLoading = true
      var param = {
        parent_id: this.team,
        principal: this.principal,
        from: this.from,
        phone: this.phone,
        number: this.number,
        punch_rate: this.punch_rate,
        page: this.page,
        nick_name: this.nick_name,
        delivery_name: this.delivery_name,
        goods_title: this.goods_title,
        goods_info: this.goods_info,
        sku_type: this.skustype,
        price: this.skusprice,
        content: this.skusname,
        status: this.status,
        gene_no: this.gene_no
      }
      var paramjson = JSON.stringify(param)
      // api.GET(config.urls.statistic_list, param, successData => {
      //   this.listLoading = false
      //   this.loadfull = false
      //   this.orderlist = successData
      //   if (successData.total === 0) {
      //     this.isDisable = true
      //   } else {
      //     this.isDisable = false
      //   }
      //   var list = successData.list
      //   list.forEach((item, index) => { // 添加状态和不同状态需要的class名称
      //     switch (item.status) {
      //       case 1:
      //         Vue.set(this.orderlist.list[index], 'statusname', '未开始')
      //         Vue.set(this.orderlist.list[index], 'statusClass', 'nostart')
      //         break
      //       case 2:
      //         Vue.set(this.orderlist.list[index], 'statusname', '进行中')
      //         Vue.set(this.orderlist.list[index], 'statusClass', 'ing')
      //         break
      //       case 3:
      //         Vue.set(this.orderlist.list[index], 'statusname', '中断')
      //         Vue.set(this.orderlist.list[index], 'statusClass', 'break')
      //         break
      //       case 4:
      //         Vue.set(this.orderlist.list[index], 'statusname', '结束')
      //         Vue.set(this.orderlist.list[index], 'statusClass', 'over')
      //         break
      //       case 5:
      //         Vue.set(this.orderlist.list[index], 'statusname', '失联')
      //         Vue.set(this.orderlist.list[index], 'statusClass', 'outcontact')
      //         break
      //     }
      //   })
      //   this.s_order_time = ordertime.toString()
      //   this.s_from = this.from
      //   this.s_phone = this.phone
      //   this.s_number = this.number
      //   this.s_punch_rate = this.punch_rate
      //   this.s_nick_name = this.nick_name
      //   this.s_delivery_name = this.delivery_name
      //   this.s_gene_no = this.gene_no
      //   this.s_goods_title = this.goods_title
      //   this.s_team = this.team
      //   this.s_principal = this.principal
      //   this.s_goods_info = this.goods_info
      // }, fail => {})
    },
    handleCurrentChange (val) {
      this.page = val
      this.getlist()
    },
    repeal () {
      this.order_time = ''
      this.team = ''
      this.principal = ''
      this.from = ''
      this.phone = ''
      this.number = ''
      this.punch_rate = ''
      this.page = ''
      this.nick_name = ''
      this.delivery_name = ''
      this.goods_title = ''
      this.goods_info = ''
      this.sku_type = ''
      this.price = ''
      this.skustype = ''
      this.skusprice = ''
      this.skusname = ''
    },
    search () {
      this.getlist()
      this.getcount()
    },
    getExcel () {
      this.s_page = 1
      if (this.s_team === '') {
        this.s_team_name = ''
      } else {
        this.teams.forEach((item) => {
          if (item.id === this.s_team) {
            this.s_team_name = item.name
          }
        })
      }
      if (this.s_principal === '') {
        this.s_principal_name = ''
      } else {
        this.principals.forEach((item) => {
          if (item.id === this.s_principal) {
            this.s_principal_name = item.name
          }
        })
      }
      if (this.s_goods_info === '') {
        this.s_goods_info_name = ''
      } else {
        this.s_goods_info_name = this.s_goods_info
//        this.mkts.forEach((item) => {
//          if (item.key === this.s_goods_info) {
//            this.s_goods_info_name = item.value
//          }
//        })
      }
      switch (parseInt(this.status)) {
        case 1:
          this.status_name = '未开始'
          break
        case 2:
          this.status_name = '进行中'
          break
        case 3:
          this.status_name = '中断'
          break
        case 4:
          this.status_name = '结束'
          break
        case 5:
          this.status_name = '失联'
          break
        default:
          this.status_name = '全部'
          break
      }
      this.searchVisible = true
    },
    download () {
      this.loadBtn = true
      var param = {
        order_time: this.s_order_time,
        parent_id: this.s_team,
        principal: this.s_principal,
        from: this.s_from,
        phone: this.s_phone,
        number: this.s_number,
        punch_rate: this.s_punch_rate,
        page: this.s_page,
        nick_name: this.s_nick_name,
        delivery_name: this.s_delivery_name,
        goods_title: this.s_goods_title,
        goods_info: this.s_goods_info,
        sku_type: this.skustype,
        price: this.skusprice,
        content: this.skusname,
        gene_no: this.s_gene_no,
        status: this.status
      }
      var paramjson = JSON.stringify(param)
      var url = config.domain + config.urls.statistic_download + '?param=' + params
      window.location.href = url
      setTimeout(_ => {
        this.loadBtn = false
      }, 4000)
    },
    checkinfo (id) {
      var paramjson = JSON.stringify(this.principals)
      window.localStorage.setItem('params_s', this.params)
      window.localStorage.setItem('principals_s', params)
      this.$router.push('/index/order/detail/' + id + '?tab=user')
    }
  }
}
</script>
<style>
  .search-box {
    font-size: 0;
  }
  .search-box .user-input{
    width: 197px;
    margin: 3px 2px;
  }
  .search-box .el-button[class*="el-icon-"] span {
      margin-left: 5px;
      display: inline-block;
  }
  .search-box{
    margin-bottom: 15px;
  }
  .pagination-container {
      margin-top: 30px;
  }
  .i-icon {
    display: inline-block;
    font-size: 16px;
    color: #666;
    margin: 0 1px;
  }
  .i-icon.icon-check {
    font-size: 18px;
  }
  .updatestatus{
    font-size: 16px;
    line-height: 2
  }
  .updatestatus span {
    font-weight: bold;
  }
  .updatestatus-btn {
    text-align: right;
  }
  .updatestatus-btn .el-button {
    margin-left: 50px;
    margin-top: 30px;
  }
  .user .state-btn.over {
    background: #ccc;
    border: 1px  solid #ccc;
  }
  .user .outcontact {
    background: #EB9E05;
    border: 1px  solid #EB9E05;
  }
  .user .state-btn {
    color: #fff;
    border-radius: 4px;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
  }
  .user .state-btn.break{
    background: #f33;
    border: 1px  solid #f33;
  }
  .user .ing {
    background: #13ce66;
    border: 1px  solid #13ce66;
  }
  .user .state-btn.nostart {
    background: #50bfff;
    border: 1px  solid #50bfff;
  }
  .qcode .el-dialog__body {
    text-align: center;
  }
  .list-type {
    position: relative;
  }
  .list-type .list-total {
    position: absolute;
    display: inline-block;
    padding: 3px 6px;
    background: #888;
    color: #fff;
    top: -13px;
    right: -20px;
    border-radius: 10px;
    line-height: 1;
    font-style: normal;
  }
  .is-active .list-type .list-total {
    background: #f00;
  }
  .qrcodeselect {
    text-align: left;
    margin-bottom: 20px;
  }
  .sync .sync-input {
    width: 220px;
  }
  .sync .sync-btn {
    margin-left: 4px;
  }
  .sync .tips {
    font-size: 12px;
    color: #f00;
    margin-bottom: 20px;
  }
  .search-according p{
    float: left;
    width: 50%;
    padding: 6px 0;
  }
  .search-according p span {
    display: inline-block;
    width: 120px;
    text-align: right;
  }
  .search-tip {
    color: #999;
    font-size: 12px;
    padding: 10px 0;
  }
  .search-tip span{
    display: inline-block;
    margin: 0 5px;
    color: #2178f1;
  }
</style>
